<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- IE 浏览器运行最新的渲染模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 启用响应式特性 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 双核使用webkit内核 -->
		<meta name="renderer" content="webkit">
		<title>旅游网</title>
		<link href="../../../css/flight/bootstrap.min.css" rel="stylesheet">
		<link href="../../../css/flight/common.css" rel="stylesheet">
		<link href="../../../css/flight/corptravel.css" rel="stylesheet">
		<link href="../../../css/flight/enterprise.css" rel="stylesheet">
		<!--<link href="../../../js/icheck/skins/all.css" rel="stylesheet" type="text/css">-->
		<!-- IconFont图标 -->
		<link href="../../../css/flight/iconfont.css" rel="stylesheet">
		<script type="text/javascript" src="../../../js/flight/jquery-1.9.1.min.js"></script>
		<script src="../../../js/flight/bootstrap.min.js"></script>
		<!-- 兼容IE8 -->
		<!--[if lte IE 9]>
        <script type="text/javascript" src="../../../js/flight/html5shiv.min.js"></script>
        <script type="text/javascript" src="../../../js/flight/respond.min.js"></script>
        <![endif]-->
		<!-- layer弹框 2.1 -->
		<script type="text/javascript" src="../../../js/flight/layer/layer.js"></script>
		<!-- 日历控件 -->
		<script language="javascript" type="text/javascript" src="../../../js/flight/My97DatePicker/WdatePicker.js"></script>
	</head>

	<body>
		<!-- header -->
		<jsp:include page="../flight-header.jsp"/>
		<!-- header end -->

		<!-- 管理模板 -->
		<div class="container bg-gray-eee box-shadow mar-bottom-30" style="padding-right:0px; padding-left:0px; position:relative; margin-top:120px;">
			<div class="col-sm-7 container bg-white  pad-bottom-20">
				<!-- 航班信息 -->
				<div style="overflow:hidden;">
					<h3 class="mar-bottom-20" style=" display:block; float:left;">乘机人</h3>

				</div>
				<div>
					<input name="input" type="text" class="form-control input-sm w300" style=" display: inline-block;" placeholder="姓名，与登机所持证件中的姓名一致">
					<select name="select" class="form-control input-sm w150" style=" display: inline-block;">
						<option value="成人" selected="selected">成人</option>
						<option value="儿童">儿童（2-12岁）</option>
						<option value="婴儿">婴儿（14天-2岁）</option>
					</select>
				</div>
				<div class="mar-top-10">
					<select name="select" class="form-control input-sm w150" style=" display: inline-block;">
						<option value="身份证" selected="selected">身份证</option>
					</select>
					<input name="input" type="text" class="form-control input-sm w300" style=" display: inline-block;" placeholder="证件号码">
				</div>

				<div class=" mar-top-10">
					<input type="button" value="添加乘机人" class="btn btn-danger zw2">
				</div>

				<!-- 航班信息 结束 -->

				<!-- 联系人 -->
				<h3 class="mar-bottom-20">联系人</h3>
				<input name="input" type="text" class="form-control input-sm" style=" display: inline-block; width:460px;" placeholder="姓名">
				<div class="mar-top-10">
					<select name="select" class="form-control input-sm w110 mar-right-10" style=" display: inline-block;">
						<option value="国家" selected="selected">中国&nbsp;&nbsp;+86</option>
					</select>
					<input name="input" type="text" class="form-control input-sm" style=" display: inline-block; width:337px;" placeholder="手机号码，接收航班信息">
				</div>
			</div>
			<div class="col-sm-5 bg-gray-eee">
				<div style=" margin-left:-15px;">
					<h4 style="overflow:hidden; margin-left:10px;">
  <span style="display:block; float:left;">03-16&nbsp;&nbsp;周三</span>
  <span style="display:block; float:left; margin-left:80px;">成都-北京</span>
  <span style=" display:block; float:right;color:#999; font-size:14px; margin-right:5px;">经济舱</span>
</h4>
				</div>
				<div style=" overflow:hidden; margin-bottom:20px;">
					<div class="flight-from" style="float:left;">
						<span class="time text-center">07:00</span><br/>
						<span class="text-center">双流机场</span>
					</div>
					<div class="flight-info" style="float:left; margin-left:100px;">
						<img src="../../../img/a.png">
						<span class="font12 gray-999">2h35m</span>
						<img src="../../../img/b.png"><br/>
						<span class="text-center font12 gray-999 mar-left-10">西藏航空有限公司 TV6101</span><br/>
						<img src="../../../img/c.png" class="mar-left-10">
						<span class="text-center font12 gray-999">实际乘坐 CA4193</span><br/>
						<span class="airline-direct"></span>
						<span class="arrow"></span>
					</div>
					<div class="flight-to" style="float:right;">
						<span class="time text-center">09:35</span><br/>
						<span class="text-center">首都机场</span>
					</div>
				</div>
				<div>
					<div class="tuigaiqian" style="cursor:pointer; color:#337ab7;">退改签说明</div>
					<div class="instruction">
						<table class="table table-bordered" style="height:150px;">
							<tr>
								<td>成人票</td>
								<td>退票扣费</td>
								<td>改期加收手续费</td>
								<td>签转</td>
							</tr>
							<tr>
								<td>起飞前24小时之前</td>
								<td>￥169/人</td>
								<td>￥368/人</td>
								<td>可以签转</td>
							</tr>
							<tr>
								<td>起飞前24小时之后</td>
								<td>￥338/人</td>
								<td>￥368/人</td>
								<td>可以签转</td>
							</tr>
						</table>
					</div>
				</div>

				<div style=" margin-left:-15px; overflow:hidden;">
					<h4 class="mar-left-10" style="display:block; float:left;">订单总额</h4>
					<h4 class="red" style=" display:block; float:right; font-weight:bold;">￥1079</h4>
				</div>
				<table class="table">
					<tr>
						<td>成人票</td>
						<td>￥991/人</td>
						<td>x1</td>
					</tr>
					<tr>
						<td>机建费</td>
						<td>￥50/成人</td>
						<td>x1</td>
					</tr>
				</table>
				<div class="order-discount">
				</div>
			</div>

		</div>

		<div class="text-center mar-top-10">

			<input type="button" value="提交订单" class="btn btn-danger mar-top-20" onclick="window.location.href ='Payment.jsp';">
		</div>

		<!-- 添加乘机人弹框 -->
		<div id="rev" style="display:none">
			<div class="modal-body">
				<div>
					<input name="input" type="text" class="form-control input-sm w200" style=" display: inline-block;" placeholder="姓名">
					<select name="select" class="form-control input-sm w150" style=" display: inline-block;">
						<option value="成人" selected="selected">成人</option>
						<option value="儿童">儿童（2-12岁）</option>
						<option value="婴儿">婴儿（14天-2岁）</option>
					</select>
				</div>
				<div class="mar-top-10">
					<select name="select" class="form-control input-sm w150" style=" display: inline-block;">
						<option value="身份证" selected="selected">身份证</option>
					</select>
					<input name="input" type="text" class="form-control input-sm w200" style=" display: inline-block;" placeholder="证件号码">
				</div>
			</div>

			<div class="modal-footer mar-top-5">
				<button type="button" class="btn btn-primary" onClick="">确认添加</button>
				<button type="button" class="btn btn-default" onClick="">取消</button>
			</div>
		</div>

		<script type="text/javascript">
			$(function() {
				$('.bubbleinfo').each(function() {
					var distance = 10;
					var time = 10;
					var hideDelay = 100;

					var hideDelayTimer = null;

					var beingShown = false;
					var shown = false;
					var trigger = $('.trigger', this);
					var info = $('.popup', this).css('opacity', 0);

					$([trigger.get(0), info.get(0)]).mouseover(function() {
						if(hideDelayTimer) clearTimeout(hideDelayTimer);
						if(beingShown || shown) {
							// don't trigger the animation again
							return;
						} else {
							// reset position of info box
							beingShown = true;

							info.css({
								top: 30,
								left: 0,
								display: 'block'
							}).animate({
								top: '-=' + distance + 'px',
								opacity: 1
							}, time, 'swing', function() {
								beingShown = false;
								shown = true;
							});
						}

						return false;
					}).mouseout(function() {
						if(hideDelayTimer) clearTimeout(hideDelayTimer);
						hideDelayTimer = setTimeout(function() {
							hideDelayTimer = null;
							info.animate({
								top: '-=' + distance + 'px',
								opacity: 0
							}, time, 'swing', function() {
								shown = false;
								info.css('display', 'none');
							});

						}, hideDelay);

						return false;
					});
				});
			});
		</script>

		<script>
			$(document).ready(function() {

				$('.zw2').on('click', function() { //添加乘机人弹框
					layer.open({
						type: 1,
						title: '添加乘机人',
						area: ['400px', 'auto'],
						fix: false, //不固定
						maxmin: false,
						content: $('#rev'),
					});
				});

			});
		</script>

		<script>
			$('.explain').hide();
			$('.safe').mouseenter(
				function() {
					$('.explain').show();
				}
			).mouseleave(
				function() {
					$('.explain').hide();
				}
			)

			$('.instruction').hide();
			$('.tuigaiqian').click(
				function() {
					$('.instruction').toggle();
				}
			)
		</script>

	</body>

</html>